<!DOCTYPE html>

<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>企业人才评估系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        background-color: #f7f9fc;
        margin: 0;
        padding: 0;
      }

      .container {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
      }

      .card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        padding: 24px;
        transition: transform 0.3s;
      }

      .card:hover {
        transform: translateY(-4px);
      }

      .nav-link:hover {
        color: #2d5bff;
      }

      .progress-bar {
        height: 8px;
        background: linear-gradient(90deg, #2d5bff, #00c48c);
        border-radius: 4px;
      }

      .ai-tag {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        background: rgba(45, 91, 255, 0.1);
        color: #2d5bff;
      }

      .chart-container {
        width: 100%;
        height: 300px;
      }

      #kpi-chart,
      #radar-chart,
      #heatmap-chart {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 顶部导航区 -->
      <header
        class="fixed-section bg-[#1A1F36] text-white h-20 flex items-center px-8"
      >
        <div class="flex items-center w-full">
          <div class="text-xl font-bold flex items-center">
            <span
              class="iconify mr-2"
              data-icon="carbon:ai-results-high"
              style="color: #2d5bff"
            ></span>
            AI Talent Pro 2025
            <span class="text-sm bg-[#2D5BFF] rounded ml-3 px-2 py-1"
              >企业版 v3.5</span
            >
          </div>
          <nav class="flex space-x-8 mx-auto">
            <a
              class="nav-link font-medium text-white hover:text-blue-300"
              href="#"
              >评估中心</a
            >
            <a class="nav-link font-medium text-gray-300" href="#"
              >候选人管理</a
            >
            <a class="nav-link font-medium text-white" href="#">数据分析</a>
            <a class="nav-link font-medium text-gray-300" href="#">团队洞察</a>
          </nav>
          <div class="flex items-center space-x-6">
            <button class="relative">
              <span class="iconify text-xl" data-icon="mdi:bell-outline"></span>
              <span
                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-[#FF647C]"
              ></span>
            </button>
            <button
              class="iconify text-xl"
              data-icon="mdi:cog-outline"
            ></button>
            <button
              class="iconify text-xl"
              data-icon="mdi:help-circle-outline"
            ></button>
            <div class="flex items-center cursor-pointer">
              <div
                class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"
              ></div>
              <span class="iconify ml-2" data-icon="mdi:chevron-down"></span>
            </div>
          </div>
        </div>
      </header>
      <!-- 主要内容区 -->
      <div class="flex flex-1">
        <!-- 侧边栏 -->
        <aside
          class="fixed-section w-[280px] bg-white border-r border-gray-200 p-6 flex flex-col"
        >
          <div class="mb-10">
            <h3 class="text-[16px] font-semibold text-[#1A1F36] mb-4">
              快速评估
            </h3>
            <div class="space-y-3">
              <button
                class="w-full flex items-center text-left p-3 rounded-lg bg-[#2D5BFF]/5 text-[#2D5BFF]"
              >
                <span class="iconify mr-3" data-icon="carbon:ai"></span>
                AI智能评估
              </button>
              <button
                class="w-full flex items-center text-left p-3 rounded-lg hover:bg-gray-100"
              >
                <span
                  class="iconify mr-3"
                  data-icon="mdi:clipboard-text-outline"
                ></span>
                传统测评
              </button>
              <button
                class="w-full flex items-center text-left p-3 rounded-lg hover:bg-gray-100"
              >
                <span class="iconify mr-3" data-icon="mdi:vr"></span>
                VR场景模拟
              </button>
            </div>
          </div>
          <div class="mb-10">
            <h3 class="text-[16px] font-semibold text-[#1A1F36] mb-4">
              实时数据
            </h3>
            <div class="space-y-4">
              <div>
                <div class="flex justify-between text-sm text-[#8F95A3]">
                  <span>今日评估数</span>
                  <span>87</span>
                </div>
                <div class="mt-1 w-full bg-gray-200 rounded h-2">
                  <div class="progress-bar" style="width: 75%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm text-[#8F95A3]">
                  <span>完成率</span>
                  <span>92%</span>
                </div>
                <div class="mt-1 w-full bg-gray-200 rounded h-2">
                  <div class="progress-bar" style="width: 92%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm text-[#8F95A3]">
                  <span>平均得分</span>
                  <span>8.4</span>
                </div>
                <div class="mt-1 w-full bg-gray-200 rounded h-2">
                  <div class="progress-bar" style="width: 84%"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1">
            <h3 class="text-[16px] font-semibold text-[#1A1F36] mb-4">
              快捷操作
            </h3>
            <div class="space-y-3">
              <button
                class="w-full bg-[#2D5BFF] text-white h-11 rounded-lg flex items-center justify-center font-medium"
              >
                <span class="iconify mr-2" data-icon="mdi:plus"></span>
                新建评估
              </button>
              <button
                class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-11 rounded-lg flex items-center justify-center font-medium"
              >
                <span
                  class="iconify mr-2"
                  data-icon="mdi:database-import"
                ></span>
                批量导入
              </button>
              <button
                class="w-full border border-gray-300 text-[#4A4F5F] h-11 rounded-lg flex items-center justify-center font-medium"
              >
                <span
                  class="iconify mr-2"
                  data-icon="mdi:file-document-outline"
                ></span>
                报告生成
              </button>
            </div>
          </div>
        </aside>
        <!-- 主内容 -->
        <main class="flex-1 overflow-y-auto p-8">
          <div class="mb-6">
            <h1 class="text-[28px] font-bold text-[#1A1F36]">数据分析面板</h1>
            <p class="text-[#4A4F5F] mt-2">
              <span
                class="iconify align-middle text-[#00C48C]"
                data-icon="mdi:shield-check-outline"
              ></span>
              <span class="align-middle ml-1"
                >数据加密保护 | AI模型更新于2025年11月4日</span
              >
            </p>
          </div>
          <!-- 功能导航标签 -->
          <div
            class="flex space-x-4 mb-6 border-b border-gray-200 overflow-x-auto"
          >
            <button
              class="tab-btn active px-4 py-3 font-medium text-[#2D5BFF] border-b-2 border-[#2D5BFF] whitespace-nowrap"
              data-tab="dashboard"
            >
              数据分析
            </button>
            <button
              class="tab-btn px-4 py-3 font-medium text-[#4A4F5F] hover:text-[#2D5BFF] whitespace-nowrap"
              data-tab="message-stats"
            >
              消息通知统计
            </button>
            <button
              class="tab-btn px-4 py-3 font-medium text-[#4A4F5F] hover:text-[#2D5BFF] whitespace-nowrap"
              data-tab="employee-learning"
            >
              员工学习管理
            </button>
            <button
              class="tab-btn px-4 py-3 font-medium text-[#4A4F5F] hover:text-[#2D5BFF] whitespace-nowrap"
              data-tab="ai-matching"
            >
              AI匹配TOP榜
            </button>
            <button
              class="tab-btn px-4 py-3 font-medium text-[#4A4F5F] hover:text-[#2D5BFF] whitespace-nowrap"
              data-tab="recruitment"
            >
              智能招聘需求
            </button>
            <button
              class="tab-btn px-4 py-3 font-medium text-[#4A4F5F] hover:text-[#2D5BFF] whitespace-nowrap"
              data-tab="documents"
            >
              企业规范文档
            </button>
            <button
              class="tab-btn px-4 py-3 font-medium text-[#4A4F5F] hover:text-[#2D5BFF] whitespace-nowrap"
              data-tab="interview-analysis"
            >
              线上面试分析
            </button>
          </div>
          <!-- 数据分析面板 -->
          <div class="tab-content" id="dashboard-panel">
            <!-- KPI指标卡片 -->
            <div class="grid grid-cols-4 gap-6 mb-8">
              <div class="card">
                <h3 class="text-[16px] text-[#4A4F5F] mb-2">AI评估准确率</h3>
                <div class="flex items-baseline">
                  <span class="text-[32px] font-bold text-[#00C48C]"
                    >94.8%</span
                  >
                  <span class="text-[#00C48C] ml-2 flex items-center">
                    <span
                      class="iconify"
                      data-icon="mdi:arrow-top-right"
                    ></span>
                    +2.4%
                  </span>
                </div>
                <p class="text-[#8F95A3] text-sm mt-2">基于DeepSeek-R1模型</p>
              </div>
              <div class="card">
                <h3 class="text-[16px] text-[#4A4F5F] mb-2">候选人匹配度</h3>
                <div class="flex items-baseline">
                  <span class="text-[32px] font-bold">87.2%</span>
                  <span class="text-[#FF9F00] ml-2 flex items-center">
                    <span
                      class="iconify"
                      data-icon="mdi:arrow-top-right"
                    ></span>
                    +1.1%
                  </span>
                </div>
                <p class="text-[#8F95A3] text-sm mt-2">岗位需求匹配率</p>
              </div>
              <div class="card">
                <h3 class="text-[16px] text-[#4A4F5F] mb-2">处理效率</h3>
                <div class="flex items-baseline">
                  <span class="text-[32px] font-bold text-[#00C48C]">3.2</span>
                  <span class="text-xs text-[#8F95A3] ml-1">倍提升</span>
                  <span class="text-[#00C48C] ml-2 flex items-center">
                    <span class="iconify" data-icon="mdi:lightning-bolt"></span>
                  </span>
                </div>
                <p class="text-[#8F95A3] text-sm mt-2">对比传统方式</p>
              </div>
              <div class="card">
                <h3 class="text-[16px] text-[#4A4F5F] mb-2">成本节省</h3>
                <div class="flex items-baseline">
                  <span class="text-[32px] font-bold text-[#00C48C]">42%</span>
                  <span class="text-[#00C48C] ml-2 flex items-center">
                    <span class="iconify" data-icon="mdi:finance"></span>
                    $23.8K
                  </span>
                </div>
                <p class="text-[#8F95A3] text-sm mt-2">年度平均</p>
              </div>
            </div>
            <!-- 评估进度 -->
            <div class="card mb-8">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                  评估进度追踪
                </h2>
                <div class="flex space-x-4">
                  <span class="ai-tag">
                    <span
                      class="iconify mr-1"
                      data-icon="carbon:ai-status-complete"
                    ></span>
                    AI实时更新
                  </span>
                  <button class="text-[#2D5BFF] flex items-center">
                    <span class="iconify mr-1" data-icon="mdi:refresh"></span>
                    刷新
                  </button>
                </div>
              </div>
              <div class="flex space-x-4 overflow-x-auto pb-4">
                <div class="flex-shrink-0 w-64 card">
                  <div class="flex justify-between mb-3">
                    <h3 class="font-medium text-[#1A1F36]">高级前端工程师</h3>
                    <span
                      class="px-2 py-1 bg-[#00C48C]/10 text-[#00C48C] rounded text-xs"
                      >进行中</span
                    >
                  </div>
                  <div class="text-sm text-[#8F95A3] mb-4">
                    <div class="flex justify-between">
                      <span>候选人: 张明</span>
                      <span>阶段 2/4</span>
                    </div>
                    <div class="mt-1 bg-gray-200 rounded h-2">
                      <div class="progress-bar" style="width: 50%"></div>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="flex-1">
                      <p class="text-xs text-[#8F95A3]">开始时间</p>
                      <p class="text-sm">11月4日 09:30</p>
                    </div>
                    <div class="flex-1">
                      <p class="text-xs text-[#8F95A3]">预估完成</p>
                      <p class="text-sm">11月5日 14:00</p>
                    </div>
                  </div>
                </div>
                <div class="flex-shrink-0 w-64 card">
                  <div class="flex justify-between mb-3">
                    <h3 class="font-medium text-[#1A1F36]">产品总监</h3>
                    <span
                      class="px-2 py-1 bg-[#FF9F00]/10 text-[#FF9F00] rounded text-xs"
                      >待审核</span
                    >
                  </div>
                  <div class="text-sm text-[#8F95A3] mb-4">
                    <div class="flex justify-between">
                      <span>候选人: 李思</span>
                      <span>阶段 4/4</span>
                    </div>
                    <div class="mt-1 bg-gray-200 rounded h-2">
                      <div class="progress-bar" style="width: 100%"></div>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="flex-1">
                      <p class="text-xs text-[#8F95A3]">完成时间</p>
                      <p class="text-sm">11月3日 16:45</p>
                    </div>
                    <div class="flex-1">
                      <p class="text-xs text-[#8F95A3]">匹配分数</p>
                      <p class="text-sm">8.7/10</p>
                    </div>
                  </div>
                </div>
                <div class="flex-shrink-0 w-64 card">
                  <div class="flex justify-between mb-3">
                    <h3 class="font-medium text-[#1A1F36]">AI算法专家</h3>
                    <span
                      class="px-2 py-1 bg-[#2D5BFF]/10 text-[#2D5BFF] rounded text-xs"
                      >准备中</span
                    >
                  </div>
                  <div class="text-sm text-[#8F95A3] mb-4">
                    <div class="flex justify-between">
                      <span>候选人: 王华</span>
                      <span>阶段 0/4</span>
                    </div>
                    <div class="mt-1 bg-gray-200 rounded h-2">
                      <div class="progress-bar" style="width: 0%"></div>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="flex-1">
                      <p class="text-xs text-[#8F95A3]">计划开始</p>
                      <p class="text-sm">11月5日 10:00</p>
                    </div>
                    <div class="flex-1">
                      <p class="text-xs text-[#8F95A3]">VR场景准备</p>
                      <p class="text-sm text-[#00C48C]">已完成</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 智能推荐 -->
            <div class="grid grid-cols-2 gap-8 mb-8">
              <!-- 推荐模块 -->
              <div class="card">
                <div class="flex justify-between items-center mb-6">
                  <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                    智能推荐候选人
                  </h2>
                  <span class="ai-tag">
                    <span
                      class="iconify mr-1"
                      data-icon="carbon:ai-results-high"
                    ></span>
                    AI匹配
                  </span>
                </div>
                <div class="space-y-4">
                  <div
                    class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
                  >
                    <div class="flex items-center">
                      <div
                        class="bg-gray-200 border-2 border-dashed rounded-xl w-12 h-12"
                      ></div>
                      <div class="ml-3">
                        <h3 class="font-medium text-[#1A1F36]">陈晓</h3>
                        <p class="text-sm text-[#8F95A3]">
                          高级UX设计师 | 5年经验
                        </p>
                      </div>
                    </div>
                    <div>
                      <div class="text-[20px] font-bold text-[#00C48C]">
                        9.2<span class="text-sm"></span>
                      </div>
                      <p class="text-[12px] text-[#8F95A3]">匹配度</p>
                    </div>
                  </div>
                  <div
                    class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
                  >
                    <div class="flex items-center">
                      <div
                        class="bg-gray-200 border-2 border-dashed rounded-xl w-12 h-12"
                      ></div>
                      <div class="ml-3">
                        <h3 class="font-medium text-[#1A1F36]">刘阳</h3>
                        <p class="text-sm text-[#8F95A3]">
                          技术负责人 | 8年经验
                        </p>
                      </div>
                    </div>
                    <div>
                      <div class="text-[20px] font-bold">
                        8.7<span class="text-sm"></span>
                      </div>
                      <p class="text-[12px] text-[#8F95A3]">匹配度</p>
                    </div>
                  </div>
                  <div
                    class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg"
                  >
                    <div class="flex items-center">
                      <div
                        class="bg-gray-200 border-2 border-dashed rounded-xl w-12 h-12"
                      ></div>
                      <div class="ml-3">
                        <h3 class="font-medium text-[#1A1F36]">赵婷婷</h3>
                        <p class="text-sm text-[#8F95A3]">
                          产品经理 | 数据驱动
                        </p>
                      </div>
                    </div>
                    <div>
                      <div class="text-[20px] font-bold text-[#FF9F00]">
                        7.9<span class="text-sm"></span>
                      </div>
                      <p class="text-[12px] text-[#8F95A3]">匹配度</p>
                    </div>
                  </div>
                </div>
                <div class="mt-6">
                  <button
                    class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-11 rounded-lg flex items-center justify-center font-medium"
                  >
                    查看全部推荐
                    <span
                      class="iconify ml-2"
                      data-icon="mdi:chevron-right"
                    ></span>
                  </button>
                </div>
              </div>
              <!-- 图表区域 -->
              <div>
                <!-- 柱状图 -->
                <div class="card mb-6">
                  <div class="flex justify-between items-center mb-6">
                    <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                      技能评估分布
                    </h2>
                    <div class="flex items-center">
                      <span class="text-sm text-[#4A4F5F]">近30天</span>
                      <span
                        class="iconify ml-2 text-[#2D5BFF]"
                        data-icon="mdi:chevron-down"
                      ></span>
                    </div>
                  </div>
                  <div class="chart-container">
                    <div id="kpi-chart"></div>
                  </div>
                </div>
                <!-- 雷达图 -->
                <div class="card">
                  <h2 class="text-[20px] font-semibold text-[#1A1F36] mb-6">
                    岗位能力分析
                  </h2>
                  <div class="chart-container">
                    <div id="radar-chart"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 热力图 -->
            <div class="card">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                  评估时段热力图
                </h2>
                <div class="ai-tag">
                  <span class="iconify mr-1" data-icon="mdi:clock-fast"></span>
                  实时更新
                </div>
              </div>
              <div class="chart-container">
                <div id="heatmap-chart"></div>
              </div>
            </div>
          </div>
          <!-- 消息通知统计面板 -->
          <div class="tab-content hidden" id="message-stats-panel">
            <div class="card mb-8">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                  消息通知统计
                  <span class="text-sm text-[#8F95A3]">2025年11月12日</span>
                </h2>
                <span class="ai-tag">
                  <span class="iconify mr-1" data-icon="mdi:chart-line"></span>
                  实时统计
                </span>
              </div>
              <div class="grid grid-cols-3 gap-6 mb-8">
                <div
                  class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4"
                >
                  <h3 class="text-[#4A4F5F] mb-2">全国关注人数</h3>
                  <div class="text-[32px] font-bold text-[#2D5BFF]">2,847</div>
                  <p class="text-[#8F95A3] text-sm mt-2">
                    湖北省: 1,203人 | 其他: 1,644人
                  </p>
                </div>
                <div
                  class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4"
                >
                  <h3 class="text-[#4A4F5F] mb-2">学习追赶人数</h3>
                  <div class="text-[32px] font-bold text-[#00C48C]">1,567</div>
                  <p class="text-[#8F95A3] text-sm mt-2">
                    完成率: 85.3% | 平均进度: 72%
                  </p>
                </div>
                <div
                  class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-4"
                >
                  <h3 class="text-[#4A4F5F] mb-2">实习对接数</h3>
                  <div class="text-[32px] font-bold text-[#FF9F00]">342</div>
                  <p class="text-[#8F95A3] text-sm mt-2">
                    在校学生项目: 145 | 已成功: 89
                  </p>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-6">
                <div class="border border-gray-200 rounded-lg p-4">
                  <h3 class="font-medium text-[#1A1F36] mb-4">
                    红榜 (发展表现稳定)
                  </h3>
                  <div class="space-y-3">
                    <div
                      class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"
                    >
                      <span>完成老项目 - 张明</span>
                      <span class="text-[#00C48C] font-medium">★ 优秀</span>
                    </div>
                    <div
                      class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"
                    >
                      <span>系统架构优化 - 李思</span>
                      <span class="text-[#00C48C] font-medium">★ 优秀</span>
                    </div>
                    <div
                      class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"
                    >
                      <span>客户成功方案 - 王华</span>
                      <span class="text-[#00C48C] font-medium">★ 优秀</span>
                    </div>
                  </div>
                </div>
                <div class="border border-gray-200 rounded-lg p-4">
                  <h3 class="font-medium text-[#1A1F36] mb-4">
                    TOP榜 (学习最快)
                  </h3>
                  <div class="space-y-3">
                    <div
                      class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"
                    >
                      <span>1. 陈晓 - 完成度</span>
                      <span class="text-[#2D5BFF] font-medium">98%</span>
                    </div>
                    <div
                      class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"
                    >
                      <span>2. 赵婷婷 - 完成度</span>
                      <span class="text-[#2D5BFF] font-medium">95%</span>
                    </div>
                    <div
                      class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"
                    >
                      <span>3. 刘阳 - 完成度</span>
                      <span class="text-[#2D5BFF] font-medium">92%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 员工学习管理面板 -->
          <div class="tab-content hidden" id="employee-learning-panel">
            <div class="card mb-8">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                  企业内部员工学习技能表
                </h2>
                <span class="ai-tag">
                  <span
                    class="iconify mr-1"
                    data-icon="mdi:account-school"
                  ></span>
                  智能推荐
                </span>
              </div>
              <div class="overflow-x-auto">
                <table class="w-full text-sm">
                  <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                      <th class="px-4 py-3 text-left text-[#4A4F5F]">
                        员工姓名
                      </th>
                      <th class="px-4 py-3 text-left text-[#4A4F5F]">岗位</th>
                      <th class="px-4 py-3 text-left text-[#4A4F5F]">
                        已学技能
                      </th>
                      <th class="px-4 py-3 text-left text-[#4A4F5F]">
                        学习进度
                      </th>
                      <th class="px-4 py-3 text-left text-[#4A4F5F]">
                        能力评分
                      </th>
                      <th class="px-4 py-3 text-left text-[#4A4F5F]">
                        提拔建议
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                      <td class="px-4 py-3 font-medium">张明</td>
                      <td class="px-4 py-3">高级工程师</td>
                      <td class="px-4 py-3">系统设计、团队管理、架构优化</td>
                      <td class="px-4 py-3">
                        <div class="w-24 bg-gray-200 rounded h-2">
                          <div class="progress-bar" style="width: 92%"></div>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <span class="text-[#00C48C] font-bold">9.2/10</span>
                      </td>
                      <td class="px-4 py-3">
                        <button
                          class="px-3 py-1 bg-[#2D5BFF] text-white text-xs rounded"
                        >
                          技术总监
                        </button>
                      </td>
                    </tr>
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                      <td class="px-4 py-3 font-medium">李思</td>
                      <td class="px-4 py-3">产品经理</td>
                      <td class="px-4 py-3">需求分析、原型设计、用户研究</td>
                      <td class="px-4 py-3">
                        <div class="w-24 bg-gray-200 rounded h-2">
                          <div class="progress-bar" style="width: 88%"></div>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <span class="text-[#00C48C] font-bold">8.8/10</span>
                      </td>
                      <td class="px-4 py-3">
                        <button
                          class="px-3 py-1 bg-[#FF9F00] text-white text-xs rounded"
                        >
                          产品总监
                        </button>
                      </td>
                    </tr>
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                      <td class="px-4 py-3 font-medium">王华</td>
                      <td class="px-4 py-3">AI算法工程师</td>
                      <td class="px-4 py-3">机器学习、深度学习、模型优化</td>
                      <td class="px-4 py-3">
                        <div class="w-24 bg-gray-200 rounded h-2">
                          <div class="progress-bar" style="width: 85%"></div>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <span class="text-[#00C48C] font-bold">8.5/10</span>
                      </td>
                      <td class="px-4 py-3">
                        <button
                          class="px-3 py-1 bg-[#2D5BFF] text-white text-xs rounded"
                        >
                          AI负责人
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <!-- AI匹配TOP榜面板 -->
          <div class="tab-content hidden" id="ai-matching-panel">
            <div class="card mb-8">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                  AI智能匹配TOP榜
                </h2>
                <span class="ai-tag">
                  <span
                    class="iconify mr-1"
                    data-icon="carbon:ai-results-high"
                  ></span>
                  多维度评估
                </span>
              </div>
              <div class="grid grid-cols-3 gap-6">
                <div
                  class="border-2 border-[#2D5BFF] rounded-lg p-4 bg-blue-50"
                >
                  <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-[#1A1F36]">🥇 第一名</h3>
                    <span class="text-[#2D5BFF] font-bold text-lg">92.3%</span>
                  </div>
                  <div class="flex items-center mb-4">
                    <div
                      class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"
                    ></div>
                    <div class="ml-3">
                      <h4 class="font-semibold text-[#1A1F36]">陈晓</h4>
                      <p class="text-sm text-[#8F95A3]">高级UX设计师 | 5年</p>
                    </div>
                  </div>
                  <div class="text-sm space-y-2">
                    <div>
                      <span class="text-[#4A4F5F]">技能匹配:</span>
                      <span class="text-[#00C48C]">95%</span>
                    </div>
                    <div>
                      <span class="text-[#4A4F5F]">经验符合度:</span>
                      <span class="text-[#00C48C]">90%</span>
                    </div>
                    <div>
                      <span class="text-[#4A4F5F]">性格匹配度:</span>
                      <span class="text-[#00C48C]">88%</span>
                    </div>
                  </div>
                </div>
                <div
                  class="border-2 border-[#FF9F00] rounded-lg p-4 bg-orange-50"
                >
                  <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-[#1A1F36]">🥈 第二名</h3>
                    <span class="text-[#FF9F00] font-bold text-lg">89.7%</span>
                  </div>
                  <div class="flex items-center mb-4">
                    <div
                      class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"
                    ></div>
                    <div class="ml-3">
                      <h4 class="font-semibold text-[#1A1F36]">刘阳</h4>
                      <p class="text-sm text-[#8F95A3]">技术负责人 | 8年</p>
                    </div>
                  </div>
                  <div class="text-sm space-y-2">
                    <div>
                      <span class="text-[#4A4F5F]">技能匹配:</span>
                      <span class="text-[#FF9F00]">92%</span>
                    </div>
                    <div>
                      <span class="text-[#4A4F5F]">经验符合度:</span>
                      <span class="text-[#FF9F00]">88%</span>
                    </div>
                    <div>
                      <span class="text-[#4A4F5F]">性格匹配度:</span>
                      <span class="text-[#FF9F00]">87%</span>
                    </div>
                  </div>
                </div>
                <div
                  class="border-2 border-[#00C48C] rounded-lg p-4 bg-green-50"
                >
                  <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-[#1A1F36]">🥉 第三名</h3>
                    <span class="text-[#00C48C] font-bold text-lg">87.4%</span>
                  </div>
                  <div class="flex items-center mb-4">
                    <div
                      class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"
                    ></div>
                    <div class="ml-3">
                      <h4 class="font-semibold text-[#1A1F36]">赵婷婷</h4>
                      <p class="text-sm text-[#8F95A3]">产品经理 | 数据驱动</p>
                    </div>
                  </div>
                  <div class="text-sm space-y-2">
                    <div>
                      <span class="text-[#4A4F5F]">技能匹配:</span>
                      <span class="text-[#00C48C]">89%</span>
                    </div>
                    <div>
                      <span class="text-[#4A4F5F]">经验符合度:</span>
                      <span class="text-[#00C48C]">86%</span>
                    </div>
                    <div>
                      <span class="text-[#4A4F5F]">性格匹配度:</span>
                      <span class="text-[#00C48C]">85%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 智能招聘需求面板 -->
          <div class="tab-content hidden" id="recruitment-panel">
            <div class="card mb-8">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                  智能招聘需求生成
                </h2>
                <span class="ai-tag">
                  <span class="iconify mr-1" data-icon="carbon:ai"></span>
                  自动生成
                </span>
              </div>
              <div
                class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6"
              >
                <p class="text-sm text-[#4A4F5F]">
                  <span
                    class="iconify align-middle text-blue-500"
                    data-icon="mdi:lightbulb"
                  ></span>
                  <span class="align-middle ml-2"
                    >AI已基于企业历史数据和行业标准自动生成招聘需求，仅需人工审核确认</span
                  >
                </p>
              </div>
              <div class="space-y-4">
                <div
                  class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition"
                >
                  <div class="flex justify-between items-start mb-3">
                    <div>
                      <h3 class="font-semibold text-[#1A1F36] text-lg">
                        高级前端工程师
                      </h3>
                      <p class="text-sm text-[#8F95A3]">
                        自动生成 | 建议数量: 3-5人
                      </p>
                    </div>
                    <span
                      class="px-3 py-1 bg-[#00C48C]/10 text-[#00C48C] rounded text-sm"
                      >待审核</span
                    >
                  </div>
                  <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <p class="text-[#8F95A3]">必需技能:</p>
                      <p class="text-[#1A1F36]">React, TypeScript, 性能优化</p>
                    </div>
                    <div>
                      <p class="text-[#8F95A3]">工作年限:</p>
                      <p class="text-[#1A1F36]">5-8年</p>
                    </div>
                    <div>
                      <p class="text-[#8F95A3]">薪资范围:</p>
                      <p class="text-[#1A1F36]">30-45K/月</p>
                    </div>
                    <div>
                      <p class="text-[#8F95A3]">优先条件:</p>
                      <p class="text-[#1A1F36]">有架构经验、开源贡献</p>
                    </div>
                  </div>
                  <div class="mt-4 flex space-x-2">
                    <button
                      class="flex-1 bg-[#2D5BFF] text-white py-2 rounded text-sm font-medium"
                    >
                      ✓ 审核通过
                    </button>
                    <button
                      class="flex-1 border border-[#2D5BFF] text-[#2D5BFF] py-2 rounded text-sm font-medium"
                    >
                      编辑
                    </button>
                  </div>
                </div>
                <div
                  class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition"
                >
                  <div class="flex justify-between items-start mb-3">
                    <div>
                      <h3 class="font-semibold text-[#1A1F36] text-lg">
                        产品总监
                      </h3>
                      <p class="text-sm text-[#8F95A3]">
                        自动生成 | 建议数量: 1-2人
                      </p>
                    </div>
                    <span
                      class="px-3 py-1 bg-[#FF9F00]/10 text-[#FF9F00] rounded text-sm"
                      >已审核</span
                    >
                  </div>
                  <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <p class="text-[#8F95A3]">必需技能:</p>
                      <p class="text-[#1A1F36]">产品战略、数据驱动决策</p>
                    </div>
                    <div>
                      <p class="text-[#8F95A3]">工作年限:</p>
                      <p class="text-[#1A1F36]">8-12年</p>
                    </div>
                    <div>
                      <p class="text-[#8F95A3]">薪资范围:</p>
                      <p class="text-[#1A1F36]">40-60K/月</p>
                    </div>
                    <div>
                      <p class="text-[#8F95A3]">优先条件:</p>
                      <p class="text-[#1A1F36]">2B/2C产品经验</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 企业规范文档面板 -->
          <div class="tab-content hidden" id="documents-panel">
            <div class="card mb-8">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                  企业规范文档管理
                </h2>
                <button
                  class="bg-[#2D5BFF] text-white px-4 py-2 rounded-lg text-sm flex items-center"
                >
                  <span class="iconify mr-1" data-icon="mdi:plus"></span>
                  上传文档
                </button>
              </div>
              <div class="space-y-4">
                <div
                  class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition"
                >
                  <div class="flex items-start justify-between">
                    <div class="flex items-start">
                      <span
                        class="iconify text-[#2D5BFF] mr-3 text-xl"
                        data-icon="mdi:file-pdf-box"
                      ></span>
                      <div>
                        <h3 class="font-semibold text-[#1A1F36]">
                          AI Talent Pro 白皮书 v2.5
                        </h3>
                        <p class="text-sm text-[#8F95A3]">
                          更新于: 2025年11月10日 | 大小: 2.3MB | 版本: 2.5
                        </p>
                      </div>
                    </div>
                    <div class="flex space-x-2">
                      <button
                        class="px-3 py-1 border border-gray-300 text-[#4A4F5F] rounded text-sm"
                      >
                        下载
                      </button>
                      <button
                        class="px-3 py-1 border border-gray-300 text-[#4A4F5F] rounded text-sm"
                      >
                        分享
                      </button>
                    </div>
                  </div>
                  <p class="text-xs text-[#8F95A3] mt-2">
                    包含: 系统架构、AI模型说明、功能详解
                  </p>
                </div>
                <div
                  class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition"
                >
                  <div class="flex items-start justify-between">
                    <div class="flex items-start">
                      <span
                        class="iconify text-[#FF9F00] mr-3 text-xl"
                        data-icon="mdi:file-document-multiple"
                      ></span>
                      <div>
                        <h3 class="font-semibold text-[#1A1F36]">
                          企业评估流程规范
                        </h3>
                        <p class="text-sm text-[#8F95A3]">
                          更新于: 2025年11月8日 | 大小: 1.8MB | 版本: 1.2
                        </p>
                      </div>
                    </div>
                    <div class="flex space-x-2">
                      <button
                        class="px-3 py-1 border border-gray-300 text-[#4A4F5F] rounded text-sm"
                      >
                        下载
                      </button>
                      <button
                        class="px-3 py-1 border border-gray-300 text-[#4A4F5F] rounded text-sm"
                      >
                        分享
                      </button>
                    </div>
                  </div>
                  <p class="text-xs text-[#8F95A3] mt-2">
                    包含: 评估步骤、最佳实践、案例分析
                  </p>
                </div>
                <div
                  class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition"
                >
                  <div class="flex items-start justify-between">
                    <div class="flex items-start">
                      <span
                        class="iconify text-[#00C48C] mr-3 text-xl"
                        data-icon="mdi:file-code-outline"
                      ></span>
                      <div>
                        <h3 class="font-semibold text-[#1A1F36]">
                          API接口文档
                        </h3>
                        <p class="text-sm text-[#8F95A3]">
                          更新于: 2025年11月12日 | 大小: 3.1MB | 版本: 3.0
                        </p>
                      </div>
                    </div>
                    <div class="flex space-x-2">
                      <button
                        class="px-3 py-1 border border-gray-300 text-[#4A4F5F] rounded text-sm"
                      >
                        下载
                      </button>
                      <button
                        class="px-3 py-1 border border-gray-300 text-[#4A4F5F] rounded text-sm"
                      >
                        分享
                      </button>
                    </div>
                  </div>
                  <p class="text-xs text-[#8F95A3] mt-2">
                    包含: 所有API端点、请求响应格式、认证方式
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- 线上面试智能分析面板 -->
          <div class="tab-content hidden" id="interview-analysis-panel">
            <div class="card mb-8">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                  线上面试智能分析
                  <span
                    class="text-xs bg-[#2D5BFF] text-white px-2 py-1 rounded ml-2"
                    >2025年11月12日</span
                  >
                </h2>
                <span class="ai-tag">
                  <span class="iconify mr-1" data-icon="mdi:microphone"></span>
                  智能语音分析
                </span>
              </div>
              <div class="grid grid-cols-2 gap-6 mb-6">
                <div class="border border-gray-200 rounded-lg p-4">
                  <h3 class="font-semibold text-[#1A1F36] mb-4">
                    🍓 智能分析 (语音分析)
                  </h3>
                  <div class="space-y-3 text-sm">
                    <div>
                      <p class="text-[#4A4F5F] mb-1">语音清晰度</p>
                      <div class="flex items-center">
                        <div class="flex-1 bg-gray-200 rounded h-2 mr-2">
                          <div
                            class="bg-[#00C48C]"
                            style="width: 92%; height: 100%; border-radius: 2px"
                          ></div>
                        </div>
                        <span class="font-medium">92%</span>
                      </div>
                    </div>
                    <div>
                      <p class="text-[#4A4F5F] mb-1">表达流畅度</p>
                      <div class="flex items-center">
                        <div class="flex-1 bg-gray-200 rounded h-2 mr-2">
                          <div
                            class="bg-[#2D5BFF]"
                            style="width: 85%; height: 100%; border-radius: 2px"
                          ></div>
                        </div>
                        <span class="font-medium">85%</span>
                      </div>
                    </div>
                    <div>
                      <p class="text-[#4A4F5F] mb-1">回答完整度</p>
                      <div class="flex items-center">
                        <div class="flex-1 bg-gray-200 rounded h-2 mr-2">
                          <div
                            class="bg-[#00C48C]"
                            style="width: 88%; height: 100%; border-radius: 2px"
                          ></div>
                        </div>
                        <span class="font-medium">88%</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="border border-gray-200 rounded-lg p-4">
                  <h3 class="font-semibold text-[#1A1F36] mb-4">
                    📊 情感分析 (语音)
                  </h3>
                  <div class="space-y-3 text-sm">
                    <div
                      class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"
                    >
                      <span>积极情绪</span>
                      <span class="text-[#00C48C] font-medium">65%</span>
                    </div>
                    <div
                      class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"
                    >
                      <span>中立情绪</span>
                      <span class="text-[#FF9F00] font-medium">28%</span>
                    </div>
                    <div
                      class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"
                    >
                      <span>消极情绪</span>
                      <span class="text-[#FF647C] font-medium">7%</span>
                    </div>
                    <div class="border-t border-gray-200 pt-2 mt-2">
                      <p class="text-[#4A4F5F]">
                        总体评价:
                        <span class="text-[#00C48C] font-semibold"
                          >情绪稳定、表现自信</span
                        >
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="border border-gray-200 rounded-lg p-4 mb-6">
                <h3 class="font-semibold text-[#1A1F36] mb-4">
                  📝 语言组织能力评估 (内容、逻辑)
                </h3>
                <div class="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <p class="text-[#4A4F5F] mb-2">逻辑清晰度</p>
                    <div class="space-y-1">
                      <div class="flex justify-between">
                        <span>论点支撑</span
                        ><span class="text-[#00C48C]">★★★★★</span>
                      </div>
                      <div class="flex justify-between">
                        <span>论证完整性</span
                        ><span class="text-[#00C48C]">★★★★☆</span>
                      </div>
                      <div class="flex justify-between">
                        <span>条理性</span
                        ><span class="text-[#2D5BFF]">★★★★★</span>
                      </div>
                    </div>
                  </div>
                  <div>
                    <p class="text-[#4A4F5F] mb-2">内容质量</p>
                    <div class="space-y-1">
                      <div class="flex justify-between">
                        <span>专业性</span
                        ><span class="text-[#00C48C]">★★★★☆</span>
                      </div>
                      <div class="flex justify-between">
                        <span>深度思考</span
                        ><span class="text-[#FF9F00]">★★★★☆</span>
                      </div>
                      <div class="flex justify-between">
                        <span>创新思维</span
                        ><span class="text-[#00C48C]">★★★★☆</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-6 mb-6">
                <div class="border border-gray-200 rounded-lg p-4">
                  <h3 class="font-semibold text-[#1A1F36] mb-4">
                    💡 面试过程评估 (全面维度)
                  </h3>
                  <div class="space-y-2 text-sm">
                    <div class="flex justify-between items-center">
                      <span>技能考察</span>
                      <div class="w-32 bg-gray-200 rounded h-2">
                        <div
                          class="bg-[#2D5BFF]"
                          style="width: 90%; height: 100%; border-radius: 2px"
                        ></div>
                      </div>
                    </div>
                    <div class="flex justify-between items-center">
                      <span>思维能力</span>
                      <div class="w-32 bg-gray-200 rounded h-2">
                        <div
                          class="bg-[#00C48C]"
                          style="width: 88%; height: 100%; border-radius: 2px"
                        ></div>
                      </div>
                    </div>
                    <div class="flex justify-between items-center">
                      <span>问题解决能力</span>
                      <div class="w-32 bg-gray-200 rounded h-2">
                        <div
                          class="bg-[#FF9F00]"
                          style="width: 85%; height: 100%; border-radius: 2px"
                        ></div>
                      </div>
                    </div>
                    <div class="flex justify-between items-center">
                      <span>情绪管理能力</span>
                      <div class="w-32 bg-gray-200 rounded h-2">
                        <div
                          class="bg-[#00C48C]"
                          style="width: 92%; height: 100%; border-radius: 2px"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="border border-gray-200 rounded-lg p-4">
                  <h3 class="font-semibold text-[#1A1F36] mb-4">
                    🎯 候选人匹配推荐
                  </h3>
                  <div
                    class="bg-blue-50 border border-blue-200 rounded p-3 mb-3 text-sm"
                  >
                    <p class="text-[#4A4F5F]">
                      基于语音、逻辑、综合能力分析，推荐等级:
                      <span class="text-[#2D5BFF] font-bold">A+级</span>
                    </p>
                  </div>
                  <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                      <span>岗位匹配度</span>
                      <span class="text-[#00C48C] font-bold">89.5%</span>
                    </div>
                    <div class="flex justify-between">
                      <span>团队文化契合</span>
                      <span class="text-[#00C48C] font-bold">87%</span>
                    </div>
                    <div class="flex justify-between">
                      <span>长期发展潜力</span>
                      <span class="text-[#2D5BFF] font-bold">91%</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="border border-gray-200 rounded-lg p-4">
                <h3 class="font-semibold text-[#1A1F36] mb-4">
                  📋 详细评估报告
                </h3>
                <div
                  class="bg-gray-50 rounded p-3 text-sm text-[#4A4F5F] space-y-2"
                >
                  <p>
                    <strong>总体评价:</strong>
                    候选人表现优秀，具有扎实的技术基础和出色的沟通能力。在回答技术问题时展现了深入的思考，逻辑清晰，能够清楚地表达复杂概念。
                  </p>
                  <p>
                    <strong>优势:</strong>
                    思维敏捷、问题分析能力强、情绪管理稳定、团队协作意愿强
                  </p>
                  <p>
                    <strong>改进方向:</strong>
                    可进一步提升在创新思维和行业趋势认知方面的表现
                  </p>
                  <p>
                    <strong>建议:</strong>
                    参考产品发布会等场景，进一步提升语言感染力和表达魅力
                  </p>
                </div>
                <div class="mt-4 flex space-x-2">
                  <button
                    class="flex-1 bg-[#2D5BFF] text-white py-2 rounded text-sm font-medium"
                  >
                    生成完整报告
                  </button>
                  <button
                    class="flex-1 border border-[#2D5BFF] text-[#2D5BFF] py-2 rounded text-sm font-medium"
                  >
                    下载PDF
                  </button>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
    <!-- 底部状态栏 -->
    <footer
      class="fixed-section bg-[#1A1F36] text-white h-10 flex items-center px-8 text-sm"
    >
      <div class="w-full flex justify-between items-center">
        <div class="flex items-center space-x-6">
          <div class="flex items-center">
            <span class="w-2 h-2 rounded-full bg-[#00C48C] mr-2"></span>
            <span>系统在线</span>
          </div>
          <div class="flex items-center">
            <span
              class="iconify text-green-400 mr-2"
              data-icon="mdi:sync"
            ></span>
            <span>数据同步中 (92%)</span>
          </div>
          <div>
            <span class="text-[#8F95A3]">DeepSeek-R1模型 | 长上下文支持</span>
          </div>
        </div>
        <div>© 2025 AI Talent Pro 企业版 | 深度求索技术提供</div>
      </div>
    </footer>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 标签页切换功能
        const tabBtns = document.querySelectorAll(".tab-btn");
        const tabContents = document.querySelectorAll(".tab-content");

        tabBtns.forEach((btn) => {
          btn.addEventListener("click", function () {
            const tabName = this.getAttribute("data-tab");

            // 隐藏所有面板
            tabContents.forEach((content) => {
              content.classList.add("hidden");
            });

            // 移除所有按钮的激活状态
            tabBtns.forEach((b) => {
              b.classList.remove(
                "active",
                "text-[#2D5BFF]",
                "border-b-2",
                "border-[#2D5BFF]"
              );
              b.classList.add("text-[#4A4F5F]");
            });

            // 显示选中的面板
            document
              .getElementById(tabName + "-panel")
              .classList.remove("hidden");

            // 激活选中的按钮
            this.classList.add(
              "active",
              "text-[#2D5BFF]",
              "border-b-2",
              "border-[#2D5BFF]"
            );
            this.classList.remove("text-[#4A4F5F]");
          });
        });

        // KPI柱状图
        const kpiChart = echarts.init(document.getElementById("kpi-chart"));
        const kpiOption = {
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: [
              "技术能力",
              "沟通协作",
              "领导力",
              "创新思维",
              "行业知识",
              "问题解决",
            ],
            axisLine: { show: false },
            axisTick: { show: false },
          },
          yAxis: {
            type: "value",
            max: 10,
            splitLine: { lineStyle: { type: "dashed" } },
          },
          series: [
            {
              name: "平均分",
              type: "bar",
              barWidth: "24px",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2D5BFF" },
                  { offset: 1, color: "#00C48C" },
                ]),
              },
              data: [8.7, 7.2, 9.1, 8.3, 7.8, 8.5],
            },
          ],
        };
        kpiChart.setOption(kpiOption);

        // 雷达图
        const radarChart = echarts.init(document.getElementById("radar-chart"));
        const radarOption = {
          tooltip: { trigger: "item" },
          radar: {
            indicator: [
              { name: "战略规划", max: 100 },
              { name: "团队管理", max: 100 },
              { name: "技术洞察", max: 100 },
              { name: "商业敏感度", max: 100 },
              { name: "产品思维", max: 100 },
            ],
            splitArea: { show: false },
            axisName: { color: "#4A4F5F" },
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: [86, 92, 78, 90, 84],
                  name: "理想模型",
                  symbol: "circle",
                  symbolSize: 8,
                  lineStyle: { width: 2 },
                  areaStyle: {
                    color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                      { offset: 0, color: "rgba(45, 91, 255, 0.3)" },
                      { offset: 1, color: "rgba(45, 91, 255, 0.1)" },
                    ]),
                  },
                },
              ],
            },
          ],
        };
        radarChart.setOption(radarOption);

        // 热力图
        const heatmapChart = echarts.init(
          document.getElementById("heatmap-chart")
        );
        const heatmapOption = {
          tooltip: { position: "top" },
          grid: { height: "80%" },
          xAxis: {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五"],
            splitArea: { show: true },
          },
          yAxis: {
            type: "category",
            data: ["8:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
            splitArea: { show: true },
          },
          visualMap: {
            min: 0,
            max: 12,
            calculable: true,
            orient: "horizontal",
            top: "top",
            left: "center",
            inRange: {
              color: ["#F7F9FC", "#E6F7FF", "#D6E4FF", "#ADC6FF", "#2D5BFF"],
            },
          },
          series: [
            {
              name: "评估数量",
              type: "heatmap",
              data: [
                [0, 0, 5],
                [0, 1, 3],
                [0, 2, 7],
                [0, 3, 10],
                [0, 4, 8],
                [1, 0, 6],
                [1, 1, 4],
                [1, 2, 8],
                [1, 3, 12],
                [1, 4, 7],
                [2, 0, 3],
                [2, 1, 2],
                [2, 2, 6],
                [2, 3, 9],
                [2, 4, 11],
                [3, 0, 8],
                [3, 1, 7],
                [3, 2, 10],
                [3, 3, 6],
                [3, 4, 4],
                [4, 0, 9],
                [4, 1, 5],
                [4, 2, 11],
                [4, 3, 8],
                [4, 4, 6],
              ],
              label: { show: true, color: "#1A1F36" },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        heatmapChart.setOption(heatmapOption);

        // 响应窗口调整
        window.addEventListener("resize", function () {
          kpiChart.resize();
          radarChart.resize();
          heatmapChart.resize();
        });
      });
    </script>
  </body>
</html>
